<template>
    <!-- lx 2023年3月13日 10点01分 -->
    <!-- 首页 -->
    <div class="home">
		<el-container style="height: 100%;">
			<el-header style="height: 70px;">
				<el-row>
					<el-col :span="3" class="home_header_logo">
						<img class="home_logo" :src='require("@/image/log.png")'>
						<span class="home_logo_text">随心拍卖后台管理系统</span>
					</el-col>
					<el-col :span="3" style="float: right">
						<el-dropdown @command="handleCommand">
							<span class="el-dropdown-link" style="z-index:200;color:white;">
								<el-avatar id="login_avatar" :src="this.$imageUrl + '?id=' + userEntity.avatarId"></el-avatar>
								&nbsp;&nbsp;&nbsp;欢迎您，{{userEntity.nickName}}<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="personal">个人信息</el-dropdown-item>
								<el-dropdown-item command="quit">退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</el-col>
				</el-row>
			</el-header>
			<el-container>
				<el-aside width="15%">
					<el-menu 
					router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" 
						background-color="#353B4E" text-color="white" active-text-color="#D7000F">
						<el-col v-for="item in menuList" :key="item.id">
							<el-submenu :index="item.menuAddress">
								<template slot="title">
									<e-icon :icon-name="item.icon"/>
									<span>{{item.menuName}}</span>
								</template>
									<el-col v-for="child in item.childs" :key="child.id">
										<el-menu-item class="child_name" @click="hhh(child.menuName)" :index='child.menuAddress' style="background-color: #323745;">
											<e-icon class="child_icon" :icon-name="child.icon"/>
											{{child.menuName}}
										</el-menu-item>
									</el-col>
							</el-submenu>
						</el-col>
					</el-menu>
				</el-aside>
				<el-main>
					<el-card>
						<el-page-header class="pageHeader" v-if='pageHeaderFlag' @back="goBack" :content="menuName">
						</el-page-header>
						<router-view></router-view>
					</el-card>
				</el-main>
			</el-container>
			<div id="bottom">
				<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022034260号-1</a>
			</div>
		</el-container>
    </div>
</template>

<script>
export default {
    name: 'HomeViews',
	data () {
			return {
				// 存放导航栏信息列表
				menuList: [],
				// 菜单名
				menuName: '',
				// 标签头是否显示状态
				pageHeaderFlag: false,
				// 用户对象
				userEntity: {}
			}
	},
	mounted () {
		// 初始化获取登录用户信息
		this.userEntity = JSON.parse(sessionStorage.getItem('user')).obj
		console.log(this.userEntity)
		// 初始化获取菜单栏信息列表
		this.getMenuListByPower()
	},
  	methods: {
		//   
		// 导航下拉点击触发方法
		handleCommand(command) {
			// 退出登录
            if(command === 'quit') {
                this.message('退出成功', 'success')
                window.sessionStorage.removeItem('token')
                window.sessionStorage.removeItem('user')
                this.$router.push({name: 'login'})
            } else if (command === 'personal') {
                this.$router.push({name: 'SysPersonalInfo'})
			}
        },
        // 消息提示框方法
        message (message, type) {
			this.$message({
				message: message,
				type: type
			})
		},
		hhh (menuName) {
			this.menuName = menuName
			this.pageHeaderFlag = true
		},
		// 标签头返回触发方法
		goBack() {
		},
		handleOpen (key, keyPath) {
		},
		handleClose (key, keyPath) {
		},
		getMenuListByPower () {
			// 取出本地存储用户信息
			var userMessage = JSON.parse(sessionStorage.getItem('user'))
			var id = userMessage.obj.id
			this.$axios.get('/menu/getMenuListByPower?id=' + id).then(res => {
				this.menuList = res.data.obj.obj
			})
		},
  }
}
</script>
<style scoped>
.pageHeader{
	padding-bottom: 20px;
}
/* 首页logo start */
.home_header_logo{
}
.home_logo{
  width: 50px;
  height: 50px;
  vertical-align:middle;
}
.home_logo_text{
  margin-left: 10px;
  font-size: 16px;
  color: white;
}
/* 首页logo end */

.home{
    width: 100%;
    height: 100%;
}
.cardTree {
  position: absolute;
  z-index: 9999;
}

.el-menu-demo {
  margin-left: 795px;
}

.p1:hover {
  border: 10px solid wheat;

}

.el-header,
.el-footer {
  background-color: #323745;
  color: rgb(255, 255, 255);
  line-height: 70px;
}

.el-aside {
  background-color: #323745;
  text-align: center;
  color: #333;
}

.el-main {
  background-color: #f4f5f0;
  color: #333;
}

body>.el-container {
  margin-bottom: 40px;
}

body>.el-container {
  height: 100%;

}

html,
body {
  height: 100%;
}
/* 登录用户的头像 */
#login_avatar{
	vertical-align: middle;
}
</style>